<template>
	<view class="content">
		<view class="top">
			<text class="top-title">当前有 {{count}} 个招聘人员</text>
			<text class="top-desc" v-if="maxCount==3">支持3个招聘人员。如需更多，请开通会员！</text>
			<text class="top-desc" v-else>会员支持{{maxCount}}个招聘人员</text>
		</view>
		<mescroll-uni :fixed="false" top="150rpx" height="100%" ref="mescrollRef" @init="mescrollInit" :up="upOption"
			@down="downCallback" @up="upCallback">
			<uni-list>
				<uni-list-item :thumb="item.avatar" thumb-size="lg" v-for="(item, index) in list" :key="index">
					<template v-slot:body>
						<view class="slot-body">
							<view class="body-top">
								<text class="name">{{item.realname}}</text>
								<text class="role" v-if="item.memberRole==1"> ( 管理员 )</text>
							</view>
							<view class="body-desc">
								<text class="body-phone">{{item.phone}}</text>
								<text class="body-t">·</text>
								<text class="body-post">{{item.postName}}</text>
							</view>
						</view>
					</template>
					<template v-slot:footer v-if="userInfo.companyRole==1 && item.memberRole !=1">
						<text class="unbind" @click="doRemove(item)">移除</text>
					</template>
				</uni-list-item>
			</uni-list>
		</mescroll-uni>
		<view class="bottom" v-if="userInfo.companyRole==1 && count < maxCount "><button @click="add">添加招聘人员</button></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				count: 0,
				list: [{
					name: "张三",
					avatar: "avatar",
					postName: '职务',
					phone: "19999999999"
				}],
				upOption: {
					onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '空空如也', // 提示
						icon: 'http://cdn.uviewui.com/uview/empty/data.png'
					}
				},
				query: {
					pageNo: 1,
					pageSize: 10,
					companyId: null,
				},
				maxCount:3,
			};
		},

		onLoad(options) {
			console.log(options);
		},
		onShow() {
			this.getList(1,10);
		},
		onReady() {
			if(this.userInfo.vipLevel > 0){
				this.maxCount=5;
			}
		},
		methods: {
			getList(pageNum, pageSize) {
				this.query.page = pageNum;
				this.query.limit = pageSize;
				this.query.companyId = this.userInfo.companyId;
				this.$apis.getCompanyUserList(this.query).then(res => {
					console.log('getCompanyUserList', res);
					this.count=res.total;
					if (pageNum == 1) {
						this.list = [];
					}
					if (res) {
						let data = res.records;
						this.list = this.list.concat(data);
						this.mescroll.endSuccess(res.records.length);
					}
				});
			},

			add() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.addRecruiter,
					query: {
						type: this.query.shieldType
					}
				});
			},

			doRemove(item) {
				uni.showModal({
					title: '提示',
					content: '确定要解除吗？',
					success: res => {
						if (res.confirm) {
							this.$apis
								.delCompanyUser({
									id: item.id
								})
								.then(() => {
									uni.showToast({
										icon: 'none',
										title: '操作成功'
									});
									this.mescroll.resetUpScroll();
								});
						}
					}
				});
			},

			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},

			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.endSuccess(2);
				this.getList(page.num, page.size);
			}
		}
	};
</script>

<style lang="scss">
	.top {
		width: 100%;
		position: fixed;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30upx;
		height: 150upx;
		background-color: $uni-bg-color-grey;

		.top-title {
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}

		.top-desc {
			color: #666;
		}
	}

	.slot-body {
		flex: 1;

		.body-top {
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				font-size: 32upx;
				font-weight: bold;
			}

			.role {

				color: $main-color;
				margin-left: 30rpx;
			}
		}

		.body-desc {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.body-phone {
			color: #666;
		}

		.body-t {
			font-size: 40rpx;
			font-weight: bold;
			margin: 0 10rpx;
		}

		.body-post {
			color: #666;
		}
	}

	.unbind {
		color: $main-color;
		background-color: $uni-bg-color-grey;
		padding: 2upx 20upx;
		border-radius: 10upx;
		height: 55upx;
		line-height: 55upx;
	}

	.bottom {
		position: fixed;
		bottom: 30upx;
		width: 100%;

		button {
			height: 80upx;
			line-height: 80upx;
			width: 90%;
			background-color: $main-color;
			color: $font-color-white;
		}
	}
</style>